import React, { useEffect, useRef, useState } from 'react'
import './login.css'
import Webcam from 'react-webcam';
import { data, useNavigate } from 'react-router-dom'
import { Toast } from 'antd-mobile'
import instance from '../http/instance'
export default function Login() {
  const nav = useNavigate()
  const [phon, setphon] = useState('')
  const [pwd, setpwd] = useState('')
  //人脸
  const webcamRef = useRef(null)
  const [isCameraOn, setIsCameraOn] = useState(false);
  const toggleCamera = async () => {
    const imageSrc = webcamRef.current.getScreenshot();
    if (imageSrc) {
      const data = await instance.post('http://127.0.0.1:8000/renlianshibie', {
        b64: imageSrc.split(',')[1]
      });
      if (data.data.code === 200) {
        Toast.show({
          icon: 'success',
          content: '欢迎您，' + data.data.personName,

        })
        nav('/shou')
      } else if (data.data.code === 400) {
        Toast.show({
          icon: 'fail',
          content: '没有此人脸',
        })
      } else {
        Toast.show({
          icon: 'fail',
          content: '图片中没有人脸',
        })
      }
    }
  };
  useEffect(() => {
    if (isCameraOn === true) {
      setTimeout(() => {
        toggleCamera()
      }, 2300)

    }

  }, [isCameraOn])

  const zhu = () => {
    nav('/zhu')
  }
  const deng = async () => {
    let  { data: {accessToken, code,refreshToken ,data} } = await instance.post(`http://localhost:8000/deng`, { phon: phon })
    if (code == 200) {
      sessionStorage.setItem("accessToken", accessToken)
      sessionStorage.setItem("refreshToken", refreshToken)
      alert('登录成功')
      localStorage.setItem('use',JSON.stringify(data))
      nav('/home')
    } else {
      Toast.show({
        icon: 'fail',
        content: '账户不存在',
      })

    }
  }

  return (
    <div>
      <div className='gu_deng'>
        <div className='gu_xin'>
          <svg t="1732933910153" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4847" width="48" height="48"><path d="M334.848 343.04q22.528-28.672 49.152-50.176 22.528-18.432 50.176-33.792t57.344-13.312q43.008 3.072 71.68 20.48t45.568 43.008 23.04 58.368 4.096 66.56-13.312 64.512-27.136 57.856-34.304 49.664-36.864 40.96q-27.648 28.672-58.368 54.784t-58.368 46.08-49.664 31.744-32.256 11.776q-12.288 0-32.256-12.288t-44.544-32.256-52.224-46.08-55.296-52.736q-17.408-17.408-38.912-39.424t-40.448-48.128-32.256-57.344-14.336-67.072q-2.048-34.816 7.168-66.048t27.136-55.808 44.032-41.472 58.88-24.064 65.024 6.656 58.88 33.28q30.72 22.528 58.368 54.272zM611.328 245.76q13.312 0 25.6 1.024 11.264 1.024 23.552 3.072t21.504 6.144 19.456 10.752 19.456 12.8l20.48 16.384q6.144-6.144 13.312-11.264 13.312-10.24 35.84-23.552 12.288-7.168 28.672-10.752t33.28-2.56 33.28 6.656 27.648 17.92q31.744 33.792 37.888 66.048t-1.536 60.416-23.04 49.664-27.648 33.792q-23.552 23.552-44.544 40.96t-51.712 39.936q-16.384 11.264-34.304 19.456t-27.136 8.192q-9.216 1.024-19.968-7.68t-26.112-19.968q-7.168-5.12-13.312-12.288l-12.288-11.264-12.288-12.288q11.264-20.48 18.432-46.08 6.144-21.504 9.216-50.688t-3.072-62.976q-7.168-31.744-18.944-55.296t-23.04-37.888q-13.312-17.408-28.672-28.672z" p-id="4848" fill="#ffffff"></path></svg>
        </div>
        <h2 className='guD_h'>恋上你</h2>
        <p className='gu_p'>恋爱约会交友，寻找另一半</p>
        {isCameraOn && (
            <Webcam
              audio={false}
              ref={webcamRef}
              screenshotFormat="image/jpeg"
              width={300}
              height={300}
            />
          )}
        <div className='gu_inp'>
          <input className='gu_i' type="text" placeholder='请输入手机号' value={phon} onChange={(e) => {
            setphon(e.target.value)
          }} /><br />
          <input className='gu_i' type="text" placeholder='输入密码' value={pwd} onChange={(e) => {
            setpwd(e.target.value)
          }} /><br />
          <button className='gu_btn' onClick={deng}>登录</button><br />
          <div className='gu_s'
            onClick={() => { setIsCameraOn(true) }}
          >-人脸登录-</div><br />
          <div className='gu_foot'>
            <span className='gu_m'>没有账户？</span><span className='gu_zhu' onClick={zhu}>注册</span>
          </div>
         
        </div>
      </div>
    </div>
  )
}
